<template>
    <div
        v-if="isExternalIcon"
        :style="styleExternalIcon"
        class="svg-external-icon svg-icon"
    />
    <svg v-else :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script setup lang="ts">

import { isExternal } from '@/utils'
import { computed } from 'vue'

interface T_Props {
    iconClass: string;
    className?: string;
}

const props = defineProps<T_Props>()

const isExternalIcon = computed(() => {return isExternal(props.iconClass)})

const iconName       = computed(() => `#icon-${props.iconClass}`)

const svgClass       = computed(() => {
    let name = ''
    if(props.className) {
        name = 'svg-icon ' + props.className
    } else {
        name = 'svg-icon'
    }
    return name
})

const styleExternalIcon = computed(() => {
    return {
        mask: `url(${props.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`,
    }
})

</script>

  <style scoped>
  .svg-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
  }
  </style>